<template>
  <a-modal
    title="查看订单"
    :width="1500"
    :visible="visible"
    :confirmLoading="confirmLoading"
    :okButtonProps="{style:{display:'none'}}"
    @cancel="handleCancel"
    cancelText="关闭"
    style="top:20px;"
  >
    <a-card :bordered="true">
      <a-descriptions title="基本信息" bordered>
        <a-descriptions-item label="退单编号">
          {{ this.model.id }}
        </a-descriptions-item>
        <a-descriptions-item label="用户编号">
          {{ this.model.memberId }}
        </a-descriptions-item>
        <a-descriptions-item label="退单时间">
          {{ this.model.createTime }}
        </a-descriptions-item>
        <a-descriptions-item label="检测报告">
          <div :key="index" v-for="(file, index) in inspectionReport">
            <a :href="file.url" target="_blank">{{ file.name }}</a>
          </div>
        </a-descriptions-item>
        <a-descriptions-item label="品检审核意见">
          {{ this.model.approveComments }}
        </a-descriptions-item>
      </a-descriptions>

      <a-divider style="margin-bottom: 20px"/>

      <div class="title">商品信息</div>
      <a-table
        style="margin-bottom: 24px"
        rowKey="id"
        bordered
        :scroll="{ x: 800 }"
        :columns="goodsColumns"
        :pagination="false"
        :dataSource="goodsData">
        <div slot="returnFileList" slot-scope="returnFileList, row">
          <div :key="index" v-for="(file, index) in returnFileList">
            <a :href="file.url" target="_blank">{{ file.name }}</a>
          </div>
        </div>
      </a-table>
      <div class="title" v-if="this.model.returnType==1">审核信息</div>
      <a-table
        size="middle"
        bordered
        :columns="approveGoodsColumns"
        :dataSource="returnOrderEditColumns"
        :scroll="{ y: 440 }"
        :pagination="false"
        :loading="loading" v-if="this.model.returnType==1"
      >
      </a-table>
    </a-card>


    <oms-order-trace-modalJX ref="OmsOrderTraceModalJX"/>

    <oms-order-process-memo-modal ref="OmsOrderProcessMemoModal"/>

  </a-modal>

</template>

<script>
import {httpAction, putAction, postAction, getAction} from '@/api/manage'
import DetailList from '@/components/tools/DetailList'
import ABadge from "ant-design-vue/es/badge/Badge"
import OmsOrderTraceModalJX from './OmsOrderTraceModalJX'
import OmsOrderProcessMemoModal from './OmsOrderProcessMemoModal'
import {mergeSameProducts} from '@/utils/util'

const DetailListItem = DetailList.Item

export default {
  name: "ReturnOrderViewModal",
  components: {
    ABadge,
    DetailList,
    DetailListItem,
    OmsOrderTraceModalJX,
    OmsOrderProcessMemoModal
  },
  data() {
    return {
      visible: false,
      confirmLoading: false,
      instructionList: [],
      inspectionReport:[],
      returnOrderEditColumns: [],
      model: {},
      url: {
        omsOrderItem: {
          list: '/oms/omsOrder/queryOmsOrderItemByMainId'
        },
        omsOrderInvoice: {
          list: '/oms/omsOrder/queryOmsOrderInvoiceByMainId'
        },
        confirmBatch: '/oms/omsOrder/confirmBatch',
        returnOrderItem: '/returns/omsOrderReturnItem/returnOrderItem',
        returnBatchOrderItem: "/returns/omsOrderReturnItemBatch/returnBatchOrderItem",
      },
      goodsColumns: [
        {
          title: '商品名称',
          key: 'productName',
          width: 150,
          dataIndex: 'productName'
        },
        {
          title: '物料编码',
          key: 'productSkuCode',
          width: 140,
          dataIndex: 'productSkuCode'
        },
        {
          title: '箱规',
          key: 'productSpecUnit',
          width: 100,
          dataIndex: 'productSpecUnit'
        },
        {
          title: '单价',
          key: 'unitPrice',
          width: 80,
          dataIndex: 'unitPrice'
        },
        {
          title: '箱装价',
          key: 'skuUnitPrice',
          width: 100,
          dataIndex: 'skuUnitPrice'
        },
        {
          title: '申请数量(整箱)',
          key: 'returnSkuUnitCount',
          width:130,
          dataIndex: 'returnSkuUnitCount'
        },
        {
          title: '申请数量(零散)',
          key: 'returnUnitCount',
          width:130,
          dataIndex: 'returnUnitCount'
        },
        {
          title: '数量小计',
          key: 'minUnitQuantityCount',
          width:90,
          dataIndex: 'minUnitQuantityCount'
        },
        {
          title: '小计金额',
          key: 'totalAmount',
          width: 100,
          dataIndex: 'totalAmount'
        },
        {
          title: '申请原因',
          key: 'reason',
          width: 140,
          dataIndex: 'reason'
        },
        {
          title: '申请凭证',
          key: 'productSkuCode',
          width: 140,
          dataIndex: 'returnFileList',
          scopedSlots: {customRender: "returnFileList"},
        },
      ],
      approveGoodsColumns: [
        {
          title: "商品名称",
          key: "productName",
          dataIndex: "productName",
          customRender: (value, row, index) => {
            const obj = {
              children: value,
              attrs: {},
            };
            if (row.showName) {
              obj.attrs.rowSpan = row.rowSpan;
            } else if(row.hideName){
              obj.attrs.rowSpan = 0;
            } 
           
            return obj;
          },
        },
        {
          title: "批次号",
          key: "batchNo",
          dataIndex: "batchNo",
        },
        {
          title: "物流实收（整箱）",
          key: "realReturnSkuUnitCount",
          width: 130,
          dataIndex: "realReturnSkuUnitCount",
        },
        {
          title: "物流实收（零散）",
          key: "realReturnUnitCount",
          width: 130,
          dataIndex: "realReturnUnitCount",
        },
        {
          title: "品检报废(整箱)",
          key: "uselessSkuUnitQuantity",
          width: 120,
          dataIndex: "uselessSkuUnitQuantity",

        },
        {
          title: "品检报废(零散)",
          key: "uselessUnitQuantity",
          width: 120,
          dataIndex: "uselessUnitQuantity",

        },
        {
          title: "品检返仓(整箱)",
          key: "reuseSkuUnitQuantity",
          width: 120,
          dataIndex: "reuseSkuUnitQuantity",

        },
        {
          title: "品检返仓(零散)",
          key: "reuseUnitQuantity",
          width: 120,
          dataIndex: "reuseUnitQuantity",

        },
        {
          title: "品检不予退货(整箱)",
          key: "refuseSkuUnitQuantity",
          width: 150,
          dataIndex: "refuseSkuUnitQuantity",

        },
        {
          title: "品检不予退货(零散)",
          key: "refuseUnitQuantity",
          width: 150,
          dataIndex: "refuseUnitQuantity",

        },
        {
          title: "小计金额(报废+返仓)",
          key: "totalRealAmount",
          width: 150,
          dataIndex: "totalRealAmount",

        },
      ],
      goodsData: [],
    }
  },
  created() {
  },
  methods: {

    show(record) {
      console.log(record);
      this.instructionList = [];
      this.inspectionReport=[],
      this.returnOrderEditColumns=[];
      this.goodsData = [];
      this.visible = true;
      this.model = Object.assign({}, record);
      if (record != {} && record.returnCertificate!=null && record.returnCertificate.length > 0) {
        this.instructionList = eval(record.returnCertificate);
      }
      if (record != {} && record.inspectionReport!=null && record.inspectionReport.length > 0) {
        this.inspectionReport = eval(record.inspectionReport);
      }
      // 加载子表数据
      if (this.model.id) {
        console.log(this.model.id);
        this.loadGoodsData();
        this.loadReturnBatchData();
      }
    },
    close() {
      this.$emit('close');
      this.visible = false;
    },
    loadGoodsData() {
      var params = {applyId: this.model.id};
      this.loading = true;
      getAction(this.url.returnOrderItem, params).then((res) => {
        if (res.success) {
          this.goodsData = res.result;
        }
        if (res.code === 510) {
          this.$message.warning(res.message)
        }
        this.loading = false;
      })
    },
    loadReturnBatchData() {
      var params = {applyId: this.model.id};
      this.loading = true;
      getAction(this.url.returnBatchOrderItem, params).then((res) => {
        if (res.success) {
          this.returnOrderEditColumns = mergeSameProducts(res.result)
        }
        if (res.code === 510) {
          this.$message.warning(res.message)
        }
        this.loading = false;
      })
    },
    handleCancel() {
      this.close()
    },
    handleTrace() {
      this.$refs.OmsOrderTraceModalJX.show(this.model);
    },
    handleProcessMemo() {
      this.$refs.OmsOrderProcessMemoModal.show(this.model);
    },
    handleConfirm() {
      if (this.model.payStatus !== 4 || this.model.status !== 0) {
        this.$message.warning('确认订单只允许选择已支付并且未确认的订单！')
        return
      }
      var ids = [this.model.id]
      var that = this
      this.$confirm({
        title: '确认订单',
        content: '是否确认选中的订单?',
        onOk: function () {
          that.loading = true
          postAction(that.url.confirmBatch, ids).then((res) => {
            if (res.success) {
              that.$message.success(res.message)
              that.model.status = 1;
              that.model.status_dictText = "已确认";
              that.$emit('ok');
            } else {
              that.$message.warning(res.message)
            }
          }).finally(() => {
            that.loading = false
          })
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.operate-container {
  background: #F2F6FC;
  height: 80px;
  margin: -25px -25px 0;
  line-height: 80px;
}

.operate-button-container {
  float: right;
  margin-right: 20px
}

.title {
  margin-bottom: 20px;
  color: rgba(0, 0, 0, 0.85);
  font-weight: bold;
  font-size: 16px;
  line-height: 1.5;
}

.color-danger {
  color: #F56C6C;
  font-size: 18px;
  font-weight: 800;
}

.ant-modal-footer {
  padding: 10px 16px;
  text-align: right;
  border-top: 1px solid #e8e8e8;
  border-radius: 0 0 4px 4px;
  display: none;
}
</style>
